<template>
	<div class="access-page">
		<!-- 表格数据 -->
		<div class="w-full h-[90%]">
			<RichTable
				:data="tableData"
				:fields="fields"
				:loading="loading"
				@on-search="handleSearch"
				@on-delete="handleBatchDelete"
				@on-selection-change="handleSelectionChange">
				<template #filter-r>
					<el-button size="small" type="danger" icon="Delete" @click="handleClear">
						清空日志
					</el-button>
				</template>
				<el-table-column label="操作" fixed="right">
					<template #default="scope">
						<el-button link type="danger" size="small" @click="handleDelete(scope.row._id)">
							删除
						</el-button>
					</template>
				</el-table-column>
			</RichTable>
		</div>
		<!-- 分页 -->
		<div class="flex items-center justify-between py-2">
			<div class="mr-2 flex items-center">
				<el-text type="info" size="small">选中：{{ selectList.length }}项</el-text>
			</div>
			<el-scrollbar>
				<ElsPagination
					:total="total"
					:pageSize="pageSize"
					:currentPage="currentPage"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange" />
			</el-scrollbar>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import type { TableField } from '~/components/RichTable/types';
import ElsPagination from '~/components/ElsPagination/index.vue';

const total = ref<number>(0);
const pageSize = ref<number>(20);
const currentPage = ref<number>(1);
const handleCurrentChange = (page: number) => {
	currentPage.value = page;
	getTableData();
};
const handleSizeChange = (size: number) => {
	pageSize.value = size;
	getTableData();
};
const loading = ref(false);
const tableData = ref<any[]>([]);
const selectList = ref<any[]>([]);

const fields: TableField[] = [
	{ type: 'text', label: 'ID', prop: '_id', sortable: true },
	{ type: 'text', label: '请求方式', prop: 'method' },
	{ type: 'text', label: '请求路径', prop: 'path' },
	{ type: 'text', label: 'IP', prop: 'ip' },
	{ type: 'text', label: 'UserAgent', prop: 'agent' },
	{ type: 'text', label: '访问时间', prop: 'date' },
];

const getTableData = (keyword?: string) => {
	loading.value = true;
	$fetch('/api/admin/accessRecord/list', {
		query: {
			keyword,
			pageSize: pageSize.value,
			page: currentPage.value,
		},
	})
		.then((res: any) => {
			if (res.code === 1) {
				tableData.value = res.data.list;
				total.value = res.data.total;
			} else {
				ElMessage.error(res.message);
			}
		})
		.finally(() => {
			loading.value = false;
		});
};

const handleSearch = (k: string) => {
	getTableData(k);
};

const handleSelectionChange = (items: any[]) => {
	selectList.value = items;
};

const handleDelete = (id: string) => {
	ElMessageBox.confirm('删除后无法恢复，是否确认删除？', '警告', { type: 'warning' })
		.then(() => {
			$fetch('/api/admin/accessRecord/delete', {
				method: 'DELETE',
				query: { id },
			}).then((res: any) => {
				if (res.code === 1) {
					ElMessage.success('删除成功');
					getTableData();
				} else {
					ElMessage.error(res.message);
				}
			});
		})
		.catch(() => {
			ElMessage.info('取消删除');
		});
};

const handleBatchDelete = () => {
	if (selectList.value.length === 0) {
		ElMessage.warning('请先选择要删除的日志');
		return;
	}
	ElMessageBox.confirm('删除后无法恢复，是否确认删除？', '警告', { type: 'warning' })
		.then(() => {
			$fetch('/api/admin/accessRecord/delete', {
				method: 'DELETE',
				query: { id: selectList.value.map((item) => item._id).join(',') },
			}).then((res: any) => {
				if (res.code === 1) {
					ElMessage.success(res.message);
					getTableData();
				} else {
					ElMessage.error(res.message);
				}
			});
		})
		.catch(() => {
			ElMessage.info('取消删除');
		});
};

const handleClear = () => {
	ElMessageBox.confirm('清空后无法恢复，是否确认清空所有访问日志？', '警告', {
		type: 'warning',
	})
		.then(() => {
			$fetch('/api/admin/accessRecord/clear', {
				method: 'DELETE',
			}).then((res: any) => {
				if (res.code === 1) {
					ElMessage.success('已清空所有访问日志');
					getTableData();
				} else {
					ElMessage.error(res.message);
				}
			});
		})
		.catch(() => {
			ElMessage.info('取消清空');
		});
};

getTableData();
</script>
